<template>
	<div class="app">
		<div class="row_box" @click="productClick(product.id)">
			<div class="row_img">
				<image style="width: 250px;height: 250px;" :src="product.thumbnail"></image>
			</div>
			<div class="row_product">
				<div class="row_product_titleBox">
					<text class="row_product_title">{{product.name}}</text>
				</div>
				<text class="row_product_subtitle">{{product.subTitle}}</text>
				<div class="row_product_bottom">
					<div class="label_box">
						<activity v-if="product.coupons.length !=0 || product.promotions.length !=0" :tranString="400" :coupon="product.coupons"
						 :promotions="product.promotions"></activity>
					</div>
					<div class="column_product_price_box">
						<vip :tranString="380" :promotions="product.promotions" :marketPrice="product.marketPrice" :price="product.price"
						 :vipPrice="product.vipPrice"></vip>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import
	    activity
	    from '../product_activity/product_activity.vue'
	import
	    vip
	    from '../product_activity/product_vip.vue'
	
	export default {
	    data() {
	        return {}
	    },
	    props: [
	        'product'
	    ],
	    components: {
	        activity,
	        vip
	    },
	    created() {
	        this.initIconFont()
	    },
	    methods: {
	        shoppingClick() {
	            var _this = this;
	            //加入购物车的按键事件
	            var quantity = 0
	            if (this.minLimit > 0) {
	                quantity = this.product.minLimit
	            } else {
	                quantity = 1
	            }
	            let data = {}
	            data.productId = this.product.id
	            data.promotionId = ""
	            data.quantity = quantity
	            data.uuid = this.getGlobalData().uuid
	            add(data).then(
	                res => {
	                    if (res.type == 'success') {
	                        eeui.toast('添加购物车成功')
	                        eeui.postMessage({
	                            pageName: '',
	                            key: 'orderIndex',
	                        });
	                    }
	                }
	            ).catch(error => {
	
	            })
	        },
	        productClick(data) {
	
	            eeui.openPage({
	                    params: data,
	                    url: 'root://pages/goods/product/details.js',
	                    statusBarType: 'immersion',
	                    statusBarStyle: false
	                },
	                (result) => {
	
	                }
	            );
	        }
	    }
	}
</script>

<style scoped>
	.app {
	  /*  padding-left: 20px;
	    padding-right: 20px; */
	    margin-bottom: 10px;
	}
	
	.row_box {
	    display: flex;
	    flex-direction: row;
	    align-content: center;
	    background-color: white;
	    padding-left: 20px;
	    padding-right: 20px;
	    padding-top: 20px;
	    padding-bottom: 20px;
	    box-sizing: border-box;
	    border-radius: 10px;
	}
	
	.addIcon {
	    font-size: 24px;
	    color: white;
	    font-family: iconfont2;
	}
	
	.row_img {
	    width: 250px;
	    height: 250px;
	    overflow: hidden;
	    border-radius: 6px;
	    margin-top: 5px;
	}
	
	.shoppingCartBox {
	    width: 36px;
	    height: 36px;
	    position: absolute;
	    right: 0px;
	    padding-right: 20px;
	}
	
	.shoppingCart {
	    width: 36px;
	    height: 36px;
	    border-radius: 50%;
	    background-image: linear-gradient(to right, #f03215, #f4a319);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.row_product {
	    margin-left: 20px;
	    height: 255px;
	    padding-right: 20px;
	    /* box-sizing: border-box; */
	    width: 420px;
	    /*border-color: #f2f2f2;*/
	    /*border-style: solid;*/
	    /*border-bottom-width: 1px;*/
	    position: relative;
	    display: block;
	    line-height: 40px;
	    overflow: hidden;
	    /*padding-top: 10px;*/
	    /*padding-bottom: 10px;*/
	    padding-left: 10px;
	    /*background-color: red;*/
	}
	
	.row_product_titleBox {
	    display: flex;
	    flex-direction: row;
	    width: 420px;
	}
	
	.column_product_price_box {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    flex-wrap: wrap;
	    position: relative;
	}
	
	.row_product_title {
	    font-size: 28px;
	    line-height: 40px;
	    text-overflow: ellipsis;
	    lines: 2;
	    width: 380px;
	    display: block;
	}
	
	.row_product_subtitle {
	    font-size: 24px;
	    color: rgba(0, 0, 0, 0.3);
	    display: block;
	    line-height: 40px;
	    lines: 1;
	    text-overflow: ellipsis;
	}
	
	.row_product_bottom {
	    position: absolute;
	    bottom: 0px;
	}
	
	.label_box {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    margin-bottom: 10px;
	}
	
	.label_item {
	    width: 100px;
	    height: 32px;
	    border-radius: 6px;
	    /* background: linear-gradient(0deg, rgba(236, 95, 88, 1), rgba(255, 230, 230, 1)); */
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    border: 1px solid rgba(236, 95, 88, 1);
	}
	
	.label_title {
	    font-size: 20px;
	    color: rgba(236, 95, 88, 1);
	    line-height: 32px;
	    height: 32px;
	    display: block;
	}
	
	.row_product_price {
	    font-size: 32px;
	    color: rgba(231, 91, 83, 1);
	    font-weight: 700;
	    margin-right: 10px;
	    display: block;
	    line-height: 40px;
	}
	
	.label_evaluation {
	    font-size: 24px;
	    color: rgba(0, 0, 0, 0.3);
	    display: block;
	    line-height: 36px;
	}
	
	.row_product_flex-end {
	    display: flex;
	    flex-direction: row;
	    align-items: flex-end;
	    /*margin-bottom: 4px;*/
	}
	
</style>
